<template>
  <div class="container">
    <div class="contl">
      <p>数据分析服务信息</p>
      <div class="text">
        <p>样本量：{{samplenum}}</p>
        <p>样本分组：{{groupnum}}</p>
      </div>
      <h6>服务内容</h6>
      <h6 v-for="(item,index) in orderList" :key="index">{{item.product.title}}</h6>

    </div>

    <div class="contr">
      <p>文件</p>
      <div class="item" v-for="(item,index) in chart" :key="index">
        <div class="headg">
          <p>{{item.title}}</p>
          <a :href="item.url">下载</a>
        </div>
        <div v-if="item.extra">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="特别说明" :name="4+index">
              <p>{{item.extra.background==0?'请仅编辑修改标示出的部分（如背景颜色标示，下划线标示等等）':'请不要编辑修改标示出的部分 （包括背景颜色标示，下划线标示等等）'}}</p>
              <h6>{{item.extra.remark}}</h6>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
export default {
  data () {
    return {
      groupnum:0,
      samplenum:0,
      activeNames:[],
      manuscript:[{name:'xxxxxx手稿一.docx',explain:true,check:true,title:'请仅编辑修改标示出的部分（如背景颜色标示，下划线标示等等）',text:'请添加您希望分享的有关您文件的任何其他信息或说明',isShow:false},{name:'xxxxxx手稿一.docx',explain:false,check:false,title:'',text:'',isShow:false}],//手稿列表
    }
  },
  store,
  methods: {
    goExpand: function(res){
      this.manuscript[res].isShow = !this.manuscript[res].isShow
    },
    handleChange(val) {
      // console.log(val);
    },
  },
  computed: {
    //订单详情
    orderList(){
      let arr = this.$store.state.pdetail.order_details
      if(arr){
        this.groupnum =  arr.filter(item=>item.product.id=='d8a413d6-db26-11e8-82a6-bc8385d5c60c')[0].quantity
        this.samplenum =  arr.filter(item=>item.product.id=='cab2fbca-db26-11e8-82a6-bc8385d5c60c')[0].quantity
        let data =  arr.filter(item=>item.product.group_slug=="data_service")
        return data
      }
    },
    chart(){
      if(this.$store.state.pdetail.charts){
        console.log(this.$store.state.pdetail.charts)
        return this.$store.state.pdetail.charts
      }
    }
  },
  mounted () {
    store.commit('changeactive', 0)
  }
}
</script>

<style lang='scss' scoped>
  .container{
    margin-left: 20px;
    width: calc(100% - 20px);
    height: 100%;
    display: flex;
    font-size: 14px;
    color: #515151;
    .contl{
      width: 50%;
      height: 100%;
      >p{
        margin-bottom: 22px;
      }
      .text{
        display: flex;
        margin-bottom: 30px;
        p{
          margin-right: 100px;
        }
      }
      h6{
        margin-bottom: 20px;
      }
    }
    .contr{
      width: 50%;
      height: 100%;
      p{
        font-size: 16px;
        margin-bottom: 20px;
      }
      .item{
      box-sizing: border-box;
      margin-bottom: 20px;
      width: 100%;
      border:1px solid rgba(230,230,230,1);
      box-shadow:0px 3px 6px 0px rgba(155,155,155,0.06);
      border-radius:5px;
      padding: 14px;
      & /deep/ .el-collapse{
        border: none;
        .el-collapse-item__header{
          border: none;
        }
      }
      .headg{
        display: flex;
        justify-content: space-between;
        a{
          font-size: 12px;
          color: rgb(181,181,181);
        }
      }
      p{
        font-size: 14px;
        color: #515151;
      }
      .cont{
        display: flex;
        margin-top: 24px;
        margin-left: 14px;
        justify-content: space-between;
        align-items: center;
        h1{
          font-size: 12px;
          color: rgb(181,181,181);
          cursor: pointer;
        }
        div{
          display: flex;
          margin-right: 14px;
          align-items: center;
          margin-bottom: 10px;
          h2{
            width:120px;
            height:20px;
            background:rgba(86,176,248,1);
            border-radius:5px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
          }
          
        }
      }
      .foot{
        display: none;
        width: 100%;
        padding: 14px;
        box-sizing: border-box;
        div{
          width: 100%;
          background: #FAFAFA;
          p{
            padding-top: 14px;
            margin-left: 14px;
            font-size: 14px;
            color: #515151;
          }
          h6{
            margin: 10px 14px 0;
            padding-bottom: 15px;
          }
        }
      }
      .foot.active{
        display: block;
      }
    }
    }
  }
</style>